<!DOCTYPE html>
<html lang="zh">
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>内网监控系统</title>
    <meta name="description" content="内网监控系统">
    <meta name="keywords" content="内网监控系统">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/plugins/elementui/index.css">
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/content.css">
</head>
<body class="gray-bg">
<div id="app">
    <template>
        <div class="filter-container" style="margin: 10px 0 20px 0;">
            <el-input placeholder="用户名/手机号" v-model="pagination.queryString" style="width: 200px;" class="filter-item" @keyup.enter.native="handleCurrentChange(1)"></el-input>
            <el-button @click="handleCurrentChange(1)" class="dalfBut">查询</el-button>
            <el-button type="primary" class="butT" @click="handleShowAdd()">创建用户</el-button>
        </div>
    </template>

    <!-- 展示列表数据 -->
    <template>
        <el-table
                :data="tableData"
                stripe
                style="width: 100%;">
            <el-table-column
                    label="ID"
                    width="60">
                <template slot-scope="scope">
                    <span>{{ scope.row.userId }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="用户名"
                    width="100">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>用户名: {{ scope.row.username }}</p>
                        <p>性别: {{ scope.row.sex == 0 ? '女' : '男' }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.username }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    label="手机号"
                    width="120">
                <template slot-scope="scope">
                    <span>{{ scope.row.phone }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="邮箱"
                    min-width="160">
                <template slot-scope="scope">
                    <span>{{ scope.row.email }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="身份"
                    min-width="100">
                <template slot-scope="scope">
                    <span>{{ scope.row.roleName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="登录时间"
                    width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span>{{ scope.row.loginTime }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="退出时间"
                    width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span>{{ scope.row.logoutTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleShowEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            v-show="scope.row.roleId != 1"
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>

    <div class="pagination-container" style="margin-top: 10px">
        <el-pagination
                class="pagiantion"
                @current-change="handleCurrentChange"
                :current-page="pagination.currentPage"
                :page-size="pagination.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="pagination.total">
        </el-pagination>
    </div>

    <!-- 新增标签弹层 -->
    <template>
        <el-dialog title="创建用户" :visible.sync="dialogFormVisible4Add">
            <el-form :model="addFormData" status-icon :rules="addRules" ref="addFormData" label-width="100px" class="ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="addFormData.username" placeholder="请设置用户名"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="addFormData.password" autocomplete="off" placeholder="请设置登录密码"></el-input>
                </el-form-item>

                <el-form-item label="确认密码" prop="checkPassword">
                    <el-input type="password" v-model="addFormData.checkPassword" autocomplete="off" placeholder="请再次输入密码"></el-input>
                </el-form-item>

                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="addFormData.phone" placeholder="请输入用户手机号"></el-input>
                </el-form-item>

                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addFormData.email" placeholder="请输入用户邮箱"></el-input>
                </el-form-item>

                <el-form-item label="分配角色">
                    <el-select v-model="roleId" placeholder="请选择用户的角色">
                        <el-option
                                v-for="item in roles"
                                :key="item.roleId"
                                :label="item.roleName"
                                :value="item.roleId">
                            <span style="float: left">{{ item.roleName }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.description }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="性别">
                    <el-select v-model="addFormData.sex" placeholder="请选择性别">
                        <el-option label="女" value="0"></el-option>
                        <el-option label="男" value="1"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="handleAdd('addFormData')">提交</el-button>
                    <el-button @click="resetAddForm('addFormData')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </template>

    <!-- 编辑标签弹层 -->
    <template>
        <el-dialog title="编辑用户信息" :visible.sync="dialogFormVisible4Edit">
            <el-form :model="editFormData" :rules="editRules" ref="editFormData"  label-width="100px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="editFormData.username"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-select v-model="editFormData.sex" placeholder="请选择用户性别">
                        <el-option label="女" value="0"></el-option>
                        <el-option label="男" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="editFormData.phone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="editFormData.email"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleEdit">确定</el-button>
                    <el-button @click="dialogFormVisible4Edit=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </template>
</div>
</body>

<style>
    .el-dialog__body{
        padding:30px 80px;
    }
</style>

<!-- 引入组件库 -->
<script src="/js/vue.js"></script>
<script src="/js/axios-0.18.0.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/plugins/elementui/index.js"></script>
<script>
    var reg = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)(?![a-zA-Z0-9]+$)(?![a-zA-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9\\W_!@#$%^&*`~()-+=]+$)(?![0-9A-Z\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{8,16}$/;
    var validatePassword = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入密码'));
        } else {
            if (!reg.test(value)) {
                callback(new Error('密码由大小写字母、数字、字符组成，且不少于8位'));
            }
            callback();
        }
    };

    var vue = new Vue({
        el: '#app',
        data: {
            pagination: { //分页相关模型数据
                currentPage: 1, //当前页码
                pageSize: 7, //每页显示的记录数
                total: 0, //总记录数
                queryString: null //查询条件
            },
            tableData: [
                {
                    roleName: ''
                }
            ], //当前页要展示的列表数据
            addFormData: {
                checkPassword: ''
            }, //新增表单数据
            editFormData: {}, //编辑表单数据
            dialogFormVisible4Add: false, //增加表单是否可见
            dialogFormVisible4Edit:false, //编辑表单是否可见
            editRules: { //校验规则
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '请选择用户性别', trigger: 'change' }
                ],
                phone: [
                    {
                        required: true,
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号码",
                        trigger: "blur"
                    }
                ],
                email: [
                    {
                        type: "email",
                        message: "请输入正确的邮箱地址",
                        trigger: ["blur", "change"]
                    }
                ]
            },
            addRules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { validator: validatePassword, trigger: ["blur", "change"] }
                ],
                checkPassword: [
                    { required: true, message: '请再次输入密码', trigger: 'blur' },
                    { validator: validatePassword, trigger: ["blur", "change"] }
                ],
                phone: [
                    {
                        required: true,
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号码",
                        trigger: "blur"
                    }
                ],
                email: [
                    {
                        type: "email",
                        message: "请输入正确的邮箱地址",
                        trigger: ["blur", "change"]
                    }
                ]
            },
            roles: [],
            roleId: 4 // 默认为设备管理员
        },
        created() {
            this.findPage();
        },
        methods: {
            // 查询所有
            findAll() {
                axios.get("/user/findAll").then(res => {
                    if (res.data.flag) {
                        // console.log(res.data.message);
                        this.tableData = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
            },

            // 分页查询
            findPage() {
                axios.post("/user/findPage", this.pagination).then(res => {
                    // console.log(res.data);
                    if (res.data.flag) {
                        // 分页的结果
                        this.tableData = res.data.data.rows;
                        // 总记录
                        this.pagination.total = res.data.data.total;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
            },

            //切换页码
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.findPage();
            },

            // 弹出新增窗口
            handleShowAdd() {
                this.dialogFormVisible4Add = true;
                axios.get("/role/findWithOutSuper").then(res => {
                    // console.log(res.data);
                    this.roles = res.data.data;
                });
            },

            // 新增
            handleAdd(addFormData) {
                this.$refs[addFormData].validate((valid) => {
                    if (valid) {
                        //校验通过了
                        // 判断密码与用户名是否相同
                        if (this.addFormData.username === this.addFormData.password) {
                            this.$message.warning("密码不能与用户名相同!");
                            // 确认密码
                        } else if (this.addFormData.checkPassword !== this.addFormData.password) {
                            this.$message.warning("两次密码不一致!");
                        } else {
                            axios.post("/user/add", this.addFormData).then(res => {
                                // console.log(res.data);
                                // 添加成功
                                if (res.data.flag) {
                                    var userId = res.data.data;
                                    // 添加用户角色表
                                    axios.post("/userRole/add?userId=" + userId + "&roleId=" + this.roleId).then(res2 => {
                                        if(res2.data.flag) {
                                            this.$message.success(res.data.message);
                                            this.dialogFormVisible4Add = false;
                                            //刷新列表数据
                                            this.findPage();
                                        } else {
                                            this.$message.error(res.data.message);
                                        }
                                    });
                                } else {
                                    this.$message.error(res.data.message);
                                }
                            });
                        }
                    } else {
                        this.$message.error("校验失败");
                    }
                });
            },

            // 重置新增表单
            resetAddForm(addRuleForm) {
                this.$refs[addRuleForm].resetFields();
            },

            // 弹出编辑窗口
            handleShowEdit(index, row) {
                // console.log(index, row);
                //弹出编辑窗口
                this.dialogFormVisible4Edit = true;
                //通过id查询用户信息
                var id = row.userId;
                axios.get("/user/findById?userId=" + id).then(res=>{
                    if(res.data.flag) {
                        //成功绑定到editFormData
                        this.editFormData = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                });
            },

            // 编辑
            handleEdit() {
                this.$refs["editFormData"].validate((valid) => {
                    if (valid) {
                        //校验通过了
                        axios.post("/user/update", this.editFormData).then(res => {
                            this.$message({
                                message: res.data.message,
                                type: res.data.flag ? "success" : "error"
                            });
                            if(res.data.flag) {
                                //关闭编辑窗口
                                this.dialogFormVisible4Edit = false;
                                //刷新列表数据
                                this.findPage();
                            }
                        });
                    }
                });
            },

            // 删除用户，同时删除用户角色表记录
            handleDelete(index, row) {
                // console.log(index, row);
                axios.delete("/user/deleteById?userId=" + row.userId).then(res => {
                    // console.log(res.data);
                    this.$message({
                        message: res.data.message,
                        type: res.data.flag ? "success" : "error"
                    });
                    this.findPage();
                });
            },
        } // end methods
    });
</script>
</html>